import "../utils" as Utils
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.12
import Qt.labs.settings 1.0
Rectangle{
    color: "transparent"
    Utils.CheckScenesWarnPage{
        visible: swipeView.currentIndex===1
        anchors.fill: parent
    }

    Rectangle{
        color: "transparent"
        anchors.fill: parent
        visible: swipeView.currentIndex===2
        Rectangle{
            anchors.right:parent.right
            y:136
            color: "#F05252"
            height: 16
            width: 200
        }
        Rectangle{
            color: "#F05252"
            anchors.right:parent.right
            y:136
            height: 120
            width: 16
        }
        Rectangle{
            anchors.right:parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin:200
            color: "#F05252"
            height: 16
            width: 200
        }
        Rectangle{
            color: "#F05252"
            anchors.right:parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin:200
            height: 120
            width: 16
        }
    }
    Rectangle{
        width: parent.width
        height: 136
        color: "#0D0F12"
        visible: swipeView.currentIndex=== 2 || swipeView.currentIndex=== 3
        Rectangle{
            color: "#001F2A37"
            width: 240
            height: 80
            x:40
            y:23
            Image{
                id: wifi_img
                width: 80
                height: 80
                anchors.left: parent.left
                source: "qrc:/imgs/wifi.png"
            }
            // Rectangle{
            //     color: "#001F2A37"
            //     width: 152
            //     height: 80
            //     x: 128
            //     y: 28
                // anchors.left:wifi_img.right
                // anchors.leftMargin:5
                // anchors.verticalCenter: wifi_img.verticalCenter
                Text {
                    id: wifiText
                    // anchors.centerIn: parent
                    color: "#31C48D"
                    text: "未登录"
                    anchors.left:wifi_img.right
                    anchors.leftMargin:5
                    anchors.verticalCenter: wifi_img.verticalCenter
                    font{
                        family: "Aldrich"
                        pixelSize: 43
                    }
                    Connections{
                        target: vehicle_manager
                        function onSignalVehiclePingTime(ping_time) {
                            wifiText.text = parseFloat(ping_time).toFixed(1) + " ms";
                        }
                    }
                }
            // }

        }
        Image{
            x:976
            y:31
            width: 64
            height: 64
            source: "qrc:/imgs/close_8.png"
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    myPopup.open()
                }
            }
        }
    }
    Rectangle{
        width: parent.width
        height: 200
        anchors.bottom: parent.bottom
        color: "#0D0F12"
        visible: swipeView.currentIndex === 2
    }
    // Rectangle{
    //     height: 10
    //     width: parent.width
    //     anchors.bottom:parent.bottom
    //     anchors.bottomMargin:200
    //     color: "#00FFFFFF"
    //     visible: swipeView.currentIndex!== 0  && swipeView.currentIndex !== 1
    //     LinearGradient{
    //         height: 10
    //         width: parent.width
    //         anchors.top: parent.top
    //         start:Qt.point(0,0)
    //         end:Qt.point(parent.width,0)
    //         gradient: Gradient{
    //             GradientStop{position:0.0;color:"#FFFFFF"}
    //             GradientStop{position:1.0;color:"#00FFFFFF"}
    //         }
    //     }
    // }
    // 右转向灯
    TurnLight{
        id: turnRightLight
        isLeft: false
        visible: can_manager.turn_right_light ? true : false
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 478
        Component.onCompleted: {
            // console.log("can_manager.turn_right_light: "+can_manager.turn_right_light)
        }
    }
    Rectangle{
        id:right_mid_bottom_info
        width: parent.width
        height: 200
        anchors.bottom: parent.bottom
        color: "#0D0F12"
        visible: swipeView.currentIndex === 3

        Rectangle{
            color: "#00000000"
            x:24
            y: 64
            width: 325
            height: 72
            // color: "#000000"
            Image{
                width: 155
                height: 72
                anchors.left:parent.left
                source: "qrc:/scraper/imgs/bottom_icon7.png"
            }
            Text{
                color: "#FCFCFC"  
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                text: can_manager.turn_angle.toFixed(1) > 60 ? "60" : can_manager.turn_angle.toFixed(1) < -60  ? "-60" : can_manager.turn_angle.toFixed(1)
                font{
                    family: "Aldrich"
                    pixelSize: 64
                }
            }
        }

        Rectangle{
            height: 120
            width: 2
            x: 365
            y: 40
            color: "transparent"
            LinearGradient{     
                anchors.fill: parent
                start:Qt.point(0,0)
                end:Qt.point(0,parent.height)
                gradient: Gradient{
                    GradientStop{position:0.0;color:"transparent"}
                    GradientStop{position:0.5;color:"#00FFFF"}
                    GradientStop{position:1.0;color:"transparent"}
                }
            }
        }

        Rectangle{
            color: "#00000000"
            x:383
            y: 64
            width: 325
            height: 72
            // color: "#000000"
            Image{
                width: 154
                height: 72
                anchors.left:parent.left
                source: "qrc:/scraper/imgs/bottom_icon8.png"
            }
            Text{
                color: "#FCFCFC"  
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                text: can_manager.bucket_angle.toFixed(1)
                font{
                    family: "Aldrich"
                    pixelSize: 64
                }
            }
        }
        
        Rectangle{
            height: 120
            width: 2
            x: 723
            y: 40
            color: "transparent"
            LinearGradient{     
                anchors.fill: parent
                start:Qt.point(0,0)
                end:Qt.point(0,parent.height)
                gradient: Gradient{
                    GradientStop{position:0.0;color:"transparent"}
                    GradientStop{position:0.5;color:"#00FFFF"}
                    GradientStop{position:1.0;color:"transparent"}
                }
            }
        }
        Rectangle{
            color: "#00000000"
            x:741
            y: 64
            width: 304
            height: 72
            // color: "#000000"
            Image{
                width: 154
                height: 72
                anchors.left:parent.left
                source: "qrc:/scraper/imgs/bottom_icon9.png"
            }
            Text{
                color: "#FCFCFC"  
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                text: can_manager.arm_height.toFixed(1)
                font{
                    family: "Aldrich"
                    pixelSize: 64
                }
            }
        }  
    }
}